import React, { PureComponent } from 'react';
import { Form, Table, Input, Slider } from 'antd';
import { connect } from 'dva';
import {debounce} from "lodash"
let style = {
    input: {
        width: "100%"
    },
    table: {
        marginTop: "20px"
    }
}
class bindStructure extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            formItemLayout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 },
            },
            st: null,
            qString: "",
            buildingStructures: [],
            selectedRowKeys: [],
            pagination: {
                pageSize: 5,
                pageNum: 1
            },
            loading: true,
            total: 0,
            data: []
        }
        this.onConfirm = this.onConfirm.bind(this);
        this.onSelectChange = this.onSelectChange.bind(this);
        this.fuzzy = this.fuzzy.bind(this);
        this.paginationChange = this.paginationChange.bind(this)
        this.getData = this.getData.bind(this)
        this.handleDebounce = debounce(this.getData, 1000, { 'maxWait': 1000 });
    }
    componentDidMount() {
        if (this.props.onLoaded) {
            this.props.onLoaded(this);
        }
        this.getData()
    }
    onSelectChange(selectedRowKeys, rows) {
        this.setState({
            selectedRowKeys,
            buildingStructures: rows
        })
    }
    select(e, item) {
        e.preventDefault()
        e.stopPropagation()
        const {updateModal,updateConfigStructure}=this.props;
        if (updateModal) {
            updateConfigStructure(item)
            .updateModal({
                visible: true,
                title: '构件属性配置',
                event: { code: 'configStructure' }
            })

        }
        
    }
    getData() {
        const {projectId,getStructures,onSuccess,onError}=this.props;
        if (getStructures) {
            const {pagination,qString}=this.state;
    
            getStructures({ ...pagination, name: qString, projectId }, (data) => {
                this.setState({
                    loading: false,
                    data: data ? data : [],
                    total: data ? data.total : 0
                })

                if (onSuccess) {
                    onSuccess(data);
                }
            }, (error) => {
                if (onError) {
                    onError(error);
                }
            });
        }
    }
    async fuzzy(e) {
        e.persist();
        await this.setState({
            qString: e.target.value
        })
        this.handleDebounce()
    }
    async paginationChange(pagination) {
        await this.setState({
            pagination: {
                ...this.state.pagination,
                pageNum: pagination.current
            }
        })
        this.getData()
    }
    async onConfirm(params = {}) {
        let {getBridgeSpans,currentBridge,form}=this.props;
        let res=await getBridgeSpans({bridgeId:currentBridge.id})
        this.props.refresh()
        form.resetFields()
        if (params.onSuccess) {
            params.onSuccess(params);
        }
        if (params.onError) {
            params.onError("");
        }
    }
    render() {
        let { getFieldDecorator } = this.props.form;
        let {
            current = {},
            columns = [
                {
                    title: '构件名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '类型',
                    dataIndex: 'templateCategory',
                    key: 'templateCategory',
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    key: 'operate',
                    render: (value, record) => <a onClick={(e) => this.select(e, record)}>编辑</a>
                }
            ],
            spans
        } = this.props;
        let bspans = spans;
        return (
            <div>
                <Form
                    {...this.state.formItemLayout}
                    labelAlign={'left'}
                >  <Form.Item label="起止桩号">
                        {getFieldDecorator('slider', {
                            rules: [
                                { required: true, message: '必填' },
                            ],
                            initialValue: [1, bspans.length]
                        })(
                            <Slider range
                                min={1}
                                max={bspans.length} />
                        )}

                    </Form.Item></Form>
                <Input style={style.input} onChange={this.fuzzy} placeholder="请输入构件名称" />
                <Table rowSelection={{ selectedRowKeys: this.state.selectedRowKeys, onChange: (e, selectedRowKeys) => this.onSelectChange(e, selectedRowKeys) }} onChange={this.paginationChange} pagination={{ current: this.state.pagination.pageNum, total: this.state.total }} style={style.table} dataSource={this.state.data} columns={columns}
                    loading={this.state.loading}
                    rowKey={record => record.id}>
                </Table>
            </div>
        );
    }
}

export default connect(
    ({
       
    }) => {
       return {

       }
    },
    dispatch => ({
        queryStructureDetail: (params) => dispatch({
            type: 'structure/queryStructureInfo',
            payload: params
        }),
        getStructures: (params, onSuccess, onError) => dispatch({
            type: 'structure/updateRefStructures',
            payload: {
                params,
                onSuccess,
                onError
            }
        }),
        updateConfigStructure: (structure) => dispatch({
            type: 'structure/updateConfigStructure',
            payload: structure
        }),
        updatebuildingStructures: ({ structures, range }, onSuccess, onError) => dispatch({
            type: 'structure/updatebuildingStructures',
            payload: { structures, range, onSuccess, onError }
        }),
        updateSpans: (spans) => dispatch({//更改布跨以及下属构造物
            type: 'refSpans/updateSpans',
            payload: spans
        }),
        getBridgeSpans: (params) => dispatch({//获取布跨构造物初始信息
            type: 'refSpans/getBridgeSpans',
            payload: params
        })
    })
    
)(Form.create('bindStructure', {

})(bindStructure));